﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>珠峰社区</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- basic styles -->
  <link href="/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/community.css" />
  <!--[if lt IE 9]>
  <script src="/js/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<% include ./include/header %>
<div class="main-container" id="main-container">
  <div class="main-container-inner">
    <a class="menu-toggler" id="menu-toggler" href="#"> <span class="menu-text"></span> </a>
    <div class="sidebar" id="sidebar">
      <ul class="nav nav-list">
        <%
        if(categories && categories.length){
        for(var i=0;i<categories.length;i++){
          var category = categories[i];
        %>
        <li> <a href="/article/view/<%=category._id%>" class="dropdown-toggle"> <i class="icon-desktop"></i> <span class="menu-text"><%= category.name%></span> <b class="arrow icon-angle-down"></b> </a>
          <%
          if(category.children && category.children.length){
          %>
          <ul class="submenu">
            <%
            for(var j=0;j<category.children.length;j++){
              var subCategory = category.children[j];
            %>
            <li> <a href="/article/view/<%=subCategory._id%>"> <i class="icon-double-angle-right"></i> <%=subCategory.name%></a> </li>
            <%
            if(subCategory.children && subCategory.children.length){
            for(var m=0;m<subCategory.children.length;m++){
              var thirdCategory = subCategory.children[m];
            %>
            <li> <a href="/article/view/<%=thirdCategory._id%>"> <i class="icon-double-angle-right"></i> <%=thirdCategory.name%></a> </li>
            <%
            }

            }
            }
            %>
          </ul>
          <%
          }
          %>
          <%
          }
          }
          %>
      </ul>
      <!-- /.nav-list -->

      <div class="sidebar-collapse" id="sidebar-collapse">
        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
      </div>
    </div>
    <div class="main-content">
      <div class="breadcrumbs" id="breadcrumbs">

        <ul class="breadcrumb">
          <li> <i class="icon-home home-icon"></i> <a href="#">首页</a> </li>
          <li class="active">文章详情</li>
        </ul>

        <div class="nav-search" id="nav-search">
          <form class="form-search">
            <span class="input-icon">
            <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
            <i class="icon-search nav-search-icon"></i> </span>
          </form>
        </div>

      </div>

      <div class="page-content" style="width: 100%">
        <div>
        <div class="page-header">
          <h1 class=" marginBottom20 marginTopNone" style="font-weight: bold">
            <%=article.articleTitle%>
          </h1>
        </div>

        <div class="row commonFloatLeft">
          <!--<h1 class="commonTextIndent marginBottom20 marginTopNone"> <%=article.articleTitle%></h1>-->
          <div class=" col-sm-12">
              <div class="tabbable " >
                <ul class="nav nav-tabs" id="myTabfixed">
                  <li class="active" >
                    <a data-toggle="tab" href="#functionDescription">
                      <i class="pink icon-dashboard bigger-110"></i>
                      功能介绍
                    </a>
                  </li>

                  <li >
                    <a data-toggle="tab" href="#articleExamples">
                      <i class="blue icon-user bigger-110"></i>
                      综合示例
                    </a>
                  </li>

                  <li >
                    <a data-toggle="tab" href="#dropdown13">
                      <i class="icon-rocket"></i>
                      面试题
                    </a>
                  </li>
                </ul>

                <div class="tab-content">
                  <div id="functionDescription" class="tab-pane in active">
                    <p>
                      <%=article.functionDescription%>
                    </p>

                  </div>

                  <div id="articleExamples" class="tab-pane">
                    <p> <%=article.articleExamples%></p>
                  </div>

                  <div id="jobInterview" class="tab-pane">
                    <p> <%=article.jobInterview%></p>
                  </div>
                </div>
              </div>
         </div>
        </div>
        <div class="row commonFloatLeft">
          <div class="col-sm-12 ">
            <hr>
            <div class="media">
              <h3 class="marginTopNone">评论</h3>
              <%
               if(article.replies&& article.replies.length){
                 for(var i=0;i<article.replies.length;i++){
                   var reply = article.replies[i];
                   %>
              <div class="media-body">
                <h4 class="media-heading"><%=reply.content%></h4>
              </div>
                  <%
                 }
               }
                %>
            </div>
            <hr>
            <div class="post-comment">
              <h3>添加评论</h3>
              <form method="post" action="/reply/add">
                <input type="hidden" name="user_id" value="<%=user._id%>">
                <input type="hidden" name="article_id" value="<%=article._id%>">
                <textarea class="m-wrap" rows="8" name="content"></textarea>
                <p><button class="btn blue" type="submit">发表</button></p>
              </form>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>

  <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="icon-double-angle-up icon-only bigger-110"></i> </a> </div>


<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/ace.js"></script>
</body>
</html>
